<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>
<style type="text/css">
	.message{
		margin: 0;
		position: absolute;
		left: 550px;
		top:15px;
		font-size: 15px;
	}
</style>

</head>
<body>
<div id="cbnuTab">
	<ul>
		<li><a href="#tab1">Tab1</a></li>
		<li><a href="#tab2">Tab2</a></li>
		<li><a href="Tab.txt">Tab3</a>
	</ul>
	<div id="tab1">Tab1의 본문내용.</div>
	<div id="tab2">Tab2의 본문내용</div>
 </div>
 
 <script type="text/javascript">
 $(function(){
		var eventSelect = function(e, tab) {
				$("<p></p>", {
					text: "Tab" + (tab.index+1) + "번이 선택되었습니다.",
					class: "message"
				}).appendTo(".ui-tabs-nav", "#cbnuTab").fadeOut(3000, function() {
					$(this).remove();	
				});
		}
		$("#cbnuTab").tabs({
				show: eventSelect				
		});

 	});
 	
 </script>
 
</body>
</html>